<template>
  <van-nav-bar :title="pageTitle" v-if="titleShow" />
  <router-view v-slot="{ Component, route }">
    <keep-alive>
      <component v-if="route.meta.keepAlive" :is="Component" :key="route.path" />
    </keep-alive>
    <component v-if="!route.meta.keepAlive" :is="Component" :key="route.path" />
  </router-view>
  <!-- <van-tabbar v-model="active" @change="onChange" v-if="active == 0 || active == 1">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="contact">我的</van-tabbar-item>
  </van-tabbar> -->
  <van-popup v-model:show="showBottomVip" round closeable position="bottom">
    <van-nav-bar title="开通会员" />
    <div class="vip-main">
      <div class="vip-main-text">
        开通会员享受更多优惠
      </div>
      <div class="vip-list">
        <div class="vip-item" v-for="item in vipList" :key="item.id">
          <i>
            {{ item.name }}
          </i>
          <p>
            <span>
              {{ item.price }}
            </span>
          </p>
        </div>
      </div>
      <div class="footer-box">
        <van-button round type="primary">开通会员</van-button>
      </div>
    </div>
  </van-popup>
  <div class="page-loading" v-if="pageLoading">
    <div class='page-loading-main'>
      <van-loading color="#0094ff">加载中...</van-loading>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, computed } from "vue"

import { useRoute, useRouter } from "vue-router";

import { showToast } from 'vant';

import userOrderStore from "@/store/index.js"

import EventBus from '@/utils/EventBus';

let { setUserInfo, getIsPageLoading } = userOrderStore()

let route = useRoute();
let router = useRouter();

let userInfo = localStorage.getItem("userInfo");
if (userInfo) {
  setUserInfo(JSON.parse(userInfo))
}

const active = ref(0)
const titleShow = ref(false)

let pageTitle = ref("首页")

let pageLoading = computed(() => {
  return userOrderStore().getIsPageLoading
})

console.log(getIsPageLoading, userOrderStore().getIsPageLoading, pageLoading, 'getIsPageLoading')

watch(() => route, () => {
  console.log(route.meta.title)
  pageTitle.value = route.meta.title
  active.value = route.meta.active
  titleShow.value = route.meta.titleShow
  document.title = route.meta.title
}, {
  deep: true
})

const onChange = (ev) => {
  let name = ev == 0 ? 'index' : 'mine'
  router.push({
    name
  })
  console.log(ev, 'ev')
}

let showBottomVip = ref(false)
let vipList = ref([
  {
    id: 1,
    name: '普通会员',
    icon: '',
    price: 60.00
  },
  {
    id: 2,
    name: '会员月卡',
    icon: '',
    price: 60.00
  },
  {
    id: 3,
    name: '会员季卡',
    icon: '',
    price: 60.00
  },
  {
    id: 4,
    name: '会员年卡',
    icon: '',
    price: 60.00
  }
])

// getCode();
</script>


<style lang="scss" scoped>
.vip-main {
  padding: 1em .5em 1em 0;
}

.vip-list {
  display: flex;

  .vip-item {
    position: relative;
    border: .18em solid #ccc;
    width: 25%;
    padding: 1em .5em 0 .5em;
    border-radius: .4em;
    margin-left: .5em;
    overflow: hidden;

    i {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 0 0 .5em 0;
      padding: .25em .5em;
      font-size: .5em;
      color: #333;
      background-color: #f2f2f2;
    }

    p {
      text-align: center;

      span {
        text-align: center;
        font-size: 1.8em;
        line-height: 2.5;
        font-weight: bold;
        color: #f00;
        margin-left: -.25em;

        &::before {
          content: "￥";
          font-size: .5em;
        }
      }
    }
  }
}

.van-button {
  width: calc(100% - .5em);
  margin: 1em .5em 0 .5em;
}

.vip-main-text {
  color: #333;
  padding: 0 .5em;
  margin-bottom: 1em;
}

.page-loading {
  position: fixed;
  z-index: 999999999999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .page-loading-main {
    padding: 10px;
    background: #fff;
    border-radius: 8px;
  }
}
</style>
